<template>
  <el-time-picker
        v-model="fmtTimeStr"
        :type="type"
        :format="format"
        :placeholder="placeholder"
        :clearable="clearable"
        :size="size"
        :readonly="readonly"
        :editable="editable"
        :disabled="disabled"
        :disabled-date="disabledDate"
        :prefixIcon="prefixIcon"
        :shortcuts="shortcuts"
        @change="onchange"
        @blur="onblur"
        @focus="onfocus"
        ref="datepicker"
      >
      </el-time-picker>
</template>

<script lang="ts">
import { PropType, defineComponent,ref,reactive } from 'vue'
import { UPDATE_MODEL_EVENT, ElComponentSize } from '@/utils/constants'

type IDatePickerType = 'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'daterange' | 'monthrange';

export default defineComponent({
  props:{
    value:{type:String},
    type:{type:String as PropType<IDatePickerType>, default:"date"},//year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange
    format:{type:String, default:"YYYY-MM-DD"},//YYYY-MM-DD YYYY-MM YYYY
    placeholder:{type:String, default:"日期"},
    clearable:{type:Boolean, default:true},
    size:{type:String as PropType<ElComponentSize>, default:"medium"},
    readonly:{type:Boolean, default:false},
    editable:{type:Boolean, default:true},
    disabled:{type:Boolean, default:false},
    disabledDate:{type:Function},
    prefixIcon:{type:[String,Object], default:''},
    shortcuts:{type: Array, default: () => [],},
  }, 
  emits: ['change', 'blur', 'focus'],
  setup(props, ctx) {
    const datepicker=ref();
    const fmtTimeStr=ref('');
    const onchange = (val:any) => {
      ctx.emit('change', val);
    }
    const onblur = ()=>{
      ctx.emit('blur');
    }
    const onfocus = ()=>{
      ctx.emit('focus');
    }
    const focus = ()=>{
      datepicker.value.focus();
    }
    return{
      fmtTimeStr,
      focus,      
    }
  }  
})
</script>
